<template>
  <div class="oms-left-tab-box">
    <div
      v-for="(item, index) in tabList"
      :key="index"
      class="olt-item"
      :class="{ 'olt-item-active': item.value === activeTab }"
      @click="changeTab(item)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  tabList: { type: Array, default: () => [] },
  activeTab: { type: String, default: '' }
});

const emit = defineEmits();

function changeTab(item) {
  if (item.value === props.activeTab) return;
  emit('change', { ...item, id: item.value });
}
</script>

<style lang="scss" scoped>
.oms-left-tab-box {
  width: 188px;
  margin-left: 12px;
  margin-top: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 12px #0000000d;
  height: calc(100vh - 70px);
  overflow: hidden;
  padding: 10px 12px;
}
.olt-item {
  text-align: center;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s;
  font-size: 14px;
  &:hover {
    background-color: #f5f7fa;
  }
}
.olt-item-active {
  background-color: var(--el-color-primary-light-8) !important;
  color: var(--el-color-primary) !important;
}
</style>
